<template>
  <div class="card-out-container">
    <CustomTable
      storeTableName="bridgeTable"
      rowKey="id"
      :loading="loading"
      bordered
      size="small"
      :dataSource="dataSource"
      :columns="columns"
      :rowSelection="
        isEnvLocal
          ? null
          : {
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
              getCheckboxProps: checkboxProps,
              fixed: 'left',
            }
      "
      :pagination="ipagination"
      @change="handleTableChange"
      :scroll="{ y: 'calc(100vh - 390px)' }"
      :showMore="showMore"
      :operateMargin="true"
    >
      <template #operateLeft>
        <div class="operate-left">
          <a-button
            v-if="isEnvLocal"
            type="primary"
            @click="syncData(syncDataAry)"
            >{{ $t("common.sync") }}</a-button
          >
          <span v-else>
            <a-button type="primary" @click="modalDo({}, 'addForm', false)">{{
              $t("common.add")
            }}</a-button>
            <a-button
              type="warning"
              ghost
              :disabled="!selectedRowKeys.length"
              @click="handleDelete(null)"
              >{{ $t("common.delMore") }}</a-button
            >
          </span>
        </div>
      </template>
      <template #operateRight>
        <div class="slot-operate-right">
          <a-input-search
            v-model:value.trim="fuzzySearch"
            enter-button
            :placeholder="$t('deviceManage.bridgeNo')"
            v-if="!showMore"
            @search="loadData"
          />
        </div>
      </template>
      <template #bodyCell="{ scope }">
        <template v-if="scope.column.key === 'nearestPriority'">
          <a-checkbox
            v-model:checked="scope.record.nearestPriority"
            disabled
          ></a-checkbox>
        </template>
        <template v-if="scope.column.key === 'bridgeType'">
          <span v-if="scope.record.bridgeType == 0"
            >{{ $t("deviceManage.dgBridge") }}
          </span>
          <span v-else></span>
        </template>
        <template v-if="scope.column.key === 'direction'">
          {{scope.record.direction==2? "A<->B" :  scope.record.direction==1? "A<-B" : "A->B"  }}
        </template>
        <template v-if="scope.column.key === 'status'">
          <a-switch
            :checked="!Boolean(scope.record.status)"
            :disabled="isEnvLocal"
            @change="(value) => changeStatus(value, scope.record)"
          />
        </template>
        <template v-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button
              type="link"
              class="primary-link"
              @click="modalDo(scope.record, 'editForm', true)"
              >{{ $t("common.editor") }}</a-button
            >
            <a-divider type="vertical" />
            <a-button
              type="link"
              :disabled="!Boolean(scope.record.status)"
              class="warning-link"
              @click="handleDelete(scope.record.id)"
              >{{ $t("common.del") }}</a-button
            >
          </span>
        </template>
      </template>
    </CustomTable>

    <add-dialog ref="addForm" @ok="modalFormOk"></add-dialog>
    <edit-dialog ref="editForm" @ok="modalFormOk"></edit-dialog>
    <SyncDataModal ref="syncDataModalRef" />
  </div>
</template>
<script>
import { ListMixinPm } from "@/mixin/listMixinPm.js";
import AddDialog from "./modules/addDialog.vue";
import EditDialog from "./modules/editDialog.vue";
import axios from "@/utils/request";
import { normalColumns, localColumns } from "./modules/makeConfig.js";
import CustomTable from "@/components/commonTable/customTable.vue";
import SyncDataModal from "@/components/syncModal/syncDataModal.vue";
export default {
  name: "deviceManageBridgeConfig",
  mixins: [ListMixinPm],
  components: {
    AddDialog,
    EditDialog,
    CustomTable,
    SyncDataModal,
  },
  data() {
    return {
      url: {
        list: '/api/device/hanger-line-bridge/list',
        delete: '/api/device/hanger-line-bridge/delete',
        save: '/api/device/hanger-line-bridge/update-status',
        // threeSelect: '/api/device/hanger-line-bridge/three-level-pull-down',
        threeSelect: '/api/device/hanger-line-bridge/three-level-pull-down-bridge',
        sync: '/api/system/iot/sync-cloud-data'
      },
      columns: [],
      bridgeTypeArray: [{ "label": this.$t('deviceManage.dgBridge'), "value": 0 }],
      directionArray: [{ "label": "A->B", "value": 0 }, { "label": "A<-B", "value": 1 }, { "label": "A<->B", "value": 2 }],
      threeSelectArray: [],
      fuzzySearchName: 'code',
      syncDataAry: [
        { syncIotCloudDataType: "ihs:device:hangerLineBridge" },
        { syncIotCloudDataType: "ihs:device:station" },
        { syncIotCloudDataType: "ihs:device:masterTrack" },
        { syncIotCloudDataType: "ihs:device:hangerLine" },
        { syncIotCloudDataType: "ihs:device:hangerLinePushRod" },
        { syncIotCloudDataType: "ihs:device:hangerLineGroup" },
      ],
    };
  },
  created() {
    this.columns = this.isEnvLocal ? localColumns : normalColumns;
    this.getThreeList();
  },
  methods: {
    async getThreeList () {
      const res = await axios.postAction(this.url.threeSelect)
      if (res.success) {
        res.data && res.data.forEach(item => {
          item.label = item.lineNo;
          item.value = item.id;
          item.children = item.masterTrackList;
          item.masterTrackList && item.masterTrackList.forEach(vv => {
            vv.label = vv.masterTrackNo;
            vv.value = vv.id;
            vv.children = vv.stationList;
            vv.stationList && vv.stationList.forEach(vvv => {
              vvv.label = vvv.stationNo;
              vvv.value = vvv.id;
            })
          })
        })

        this.threeSelectArray = res.data
      }
    },
    initModalSelectOptions() {
      return {
        bridgeTypeArray: this.bridgeTypeArray,
        directionArray: this.directionArray,
        threeSelectArray: this.threeSelectArray,
        status: [
          { value: 0, label: this.$t("common.start") },
          { value: 1, label: this.$t("common.stop") },
        ],
      };
    },
  },

}
</script>
